<template>
  <div class="tokens">
    <span class="token" v-for="(item,index) in tokens" :key="index">
      {{item.value}}<span class="token-info">{{item.label}} {{item.start}}-{{item.end}}</span>
    </span>
  </div>
</template>

<script>
export default {
  props: ['tokens'],
};
</script>

<style>
.tokens {
  padding: 15px;
  border-radius: 5px;
  border: solid 1px #eaeaea;
}
.token {
  padding: 5px;
  margin: 5px;
  border-radius: 2px;
  border: solid 1px #eaeaea;
  display: inline-block;
  font-size: 14px;
}
.token-info {
  font-size: 12px;
  color: #666;
  margin-left: 5px;
}
</style>
